<template>
  <div class="layout ">
    <div class="layouts">
      <div>
        <div style="display: flex;align-items: center;justify-content: center;">
          <img
            src="@/assets/img/common/ic_internet.svg"
            alt=""
            class="errorimg"
          />
        </div>
        <div class="errorTip" v-if="error.statusCode === 404">
          {{ $t('Page_not_found') }}
        </div>
        <div class="errorTip" v-else>{{ $t('App_error') }}</div>
        <div style="height:20px;"></div>
        <!-- <nuxt-link to="/" class="errorBack">{{$t('Return')}}</nuxt-link> -->
        <div class="errorBack" @click="backToPreviousPage">
          {{ $t('Return') }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import share from '@/mixins/share'
export default {
  props: ['error'],
  layout: 'blog', // 你可以为错误页面指定自定义的布局
  mixins: [share],
  created () {
    this.getLang()
  },
  methods: {
    backToPreviousPage () {
      //   this.$router.go(-1)
      this.$router.push('/home')
    }
  }
}
</script>

<style scoped lang="scss">
.layouts {
  width: calc(100% - 48px);
  height: 50vh;
  margin-left: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  .errorimg {
    width: 128px;
    height: 128px;
  }
  .errorTip {
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: #39404d;
    text-align: center;
  }
  .errorBack {
    display: block;
    font-size: 16px;
    line-height: 22px;
    font-weight: 600;
    color: var(--text-color);
    text-align: center;
  }
}
</style>
